<template>
	<view>
		<view class="pagess">
			<uNavbar title="开奖结果" bgColor="#10191F" leftIconColor="#ffffff" :titleStyle="titleStyle" rightText="往期回顾" @rightClick="right">
			</uNavbar>
			<view class="botbox">
				<view class="tit">
					中奖号码
				</view>
				<view class="botbox-wrap">
					<view class="botbox-item" >
						{{firstDigit}}
					</view>
					<view class="botbox-item"  >
						{{secondDigit}}
					</view>
					<view class="botbox-item"  v-if="thirdDigit">
					{{thirdDigit}}
					</view>
				</view>
				<view class="kaijiang flex_c">
					<text>{{carInfo.lottery_number_value}}</text>
				</view>
			</view>

			<view class="exhibition ">
				<view class="congratulations">
					<text >开奖车型</text>
				</view>
				<view class="car_box_tit flex_Z">
					<view class="car_box_tit_l flex_dq">
						<image src="../../static/icon/i_car1.png" mode="aspectFill"></image>
						<text>厂商指导价</text>
					</view>
					<view class="car_number">
						<text>{{carInfoPool.market_price}}</text>
						<image class="car_bg2" src="../../static/image/car1.png" mode=""></image>
					</view>
					<image class="carlogo" :src="carInfoPool.logo" mode=""></image>
				</view>
				<image class="bg1" src="../../static/image/car_bg.png" mode="aspectFill"></image>
				<image class="bg2" :src="carInfoPool.cover" data-url="/pagesMy/nationalCarPooling/carDetail" @click="allJump" mode="aspectFill"></image>
				<text class="jindu">{{carInfoPool.name}}</text>
				
				<view class="lucky flex_Z">
					<view class="lucky_box flex_ld">
						<text class="f30 xingyun">幸运车主 </text>
						<text class="f30 xingyun">{{winNumber.nickname}}</text>
					</view>
					<view class="lucky_box flex_ld">
						<text class="f30">完拼卡编号 </text>
						<text class="f30">{{winNumber.goods_number}}</text>
					</view>
					<view class="lucky_box flex_ld">
						<text class="f30">完拼时间 </text>
						<text class="f30">{{winNumber.completed_time}}</text>
					</view>
				</view>
			</view>
			
			<view class="result flex_ZC" v-if="carInfo.member_status!=-1">
				<text class="result_tit">我的开奖结果</text>
				<text v-if="carInfo.member_status==0" class="f30 c0">您未中签，期待下次参与</text>
				<text v-if="carInfo.member_status==1 ||carInfo.member_status==6" class="f30 c0">恭喜中签，请与客服联系</text>
			</view>
<!-- 			<view class="tips flex_Z">
				<text class="f30">小提示</text>
				<text class="f26">每一期开奖结束后，所有人通过开盲盒获得的免费配件都会随机移除20%，通过交易市场购买的配件仍然保留，</text>
			</view> -->
			<view class="tip_btn flex_c" @click="goChooseCar">
				<text>好的</text>
			</view>
			<view class="empty"></view>
		</view>
	</view>
</template>

<script>
	import {
		carIndexInfo,lastLotteryRecord,resetWinningStatus
	} from "../../api/mycar.js";
	export default {
		data() {
			return {
				firstDigit:"",
				secondDigit:"",
				thirdDigit:"",
				carInfo: {},
				winNumber:{},
				carInfoPool: {},
				activeShow:false,
				installmentId:null,
				titleStyle: {
					color: '#ffffff'
				},
			}
		},
		onLoad(e) {
			console.log(e);
			// this.activeShow = e.activeShow
			// this.installmentId = e.installmentId
			this.initRecord()
		
		},
		methods: {
			right(){
				uni.navigateTo({
					url:"/pagesMy/nationalCarPooling/previousReview?id=" + this.carInfo.id
				})
			},
			initRecord(){
				lastLotteryRecord().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.carInfo = res.data
						this.winNumber = res.data.winning_member_data
						this.carInfoPool = res.data.car_data
						
						let numberStr = res.data.winning_number
						// 使用 split 方法将字符串转为数组
						let digitsArray = numberStr.split('');
						// 分别将每一位数字存入不同的变量
						let [firstDigit, secondDigit, thirdDigit] = digitsArray;
						this.firstDigit=firstDigit,
						this.secondDigit=secondDigit
						this.thirdDigit=thirdDigit
						
						if(this.activeShow){
							this.lookWinning()
						}
					}
				})
			},
			lookWinning(){
				let data = {
					installment_id:this.installmentId,
					winning_status:this.carInfo.member_status
				}
				resetWinningStatus(data).then(res => {
					console.log(res);
				})
			},
			allJump(e) {
				let {url} = e.currentTarget.dataset
				uni.navigateTo({
					url: url
				})
			},
			goChooseCar(){
				// if(this.activeShow){
				// 	uni.reLaunch({
				// 		url: '/pagesMy/nationalCarPooling/carIndex' 
				// 	})
				// }
				//  if(this.carInfo.member_status == 6){
				// 	uni.redirectTo({
				// 		url: '/pagesMy/nationalCarPooling/chooseCar' 
				// 	})
				// }else if(this.carInfo.member_status == 1){
				// 	uni.navigateTo({
				// 		url: '/pagesMy/nationalCarPooling/myDelivery'
				// 	})
				// }
				 	uni.reLaunch({
				 		url: '/pagesMy/nationalCarPooling/carIndex' 
				 	})
			}
		},
	}
</script>

<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.pagess {
		width: 100%;
		min-height: 100vh;
		background: #10191F;
	}

	.botbox {
		width: 690rpx;
		min-height: 326rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding-top: 24rpx;

		.tit {
			width: 690rpx;
			text-align: center;
			font-weight: 400;
			font-size: 52rpx;
			font-family: iconfont2;
			background: linear-gradient(180deg, #26A4F2, #ffffff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.botbox-wrap {
			width: 690rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
			font-family: 'iconfont2';

			.botbox-item {
				width: 158rpx;
				height: 182rpx;
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-family: iconfont2;
				font-size: 200rpx;
				text-align: center;
				line-height: 182rpx;
				color: #fff;
			}
		}
	}

	.kaijiang {
		width: 100%;
		font-size: 28rpx;
		color: #ffffff90;
		padding: 30rpx 0;
	}

	.explain {
		width: 690rpx;
		font-size: 28rpx;
		color: #ffffff !important;
	}

	.exhibition {
		position: relative;
		width: 690rpx;
		min-height: 820rpx;
		margin: 40rpx auto 0;
		text-align: center;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}
	.congratulations {
		font-family: 'iconfont2';
		font-size: 46rpx;
		padding: 30rpx 0;
		background: linear-gradient(90deg, #26A4F2, #ffffff);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.lucky{
		width: 690rpx;
		position: absolute;
		bottom: 40rpx;
		left: 0;
		text-align: left;
		color: #ffffff;
	}
	.lucky_box{
		width: 540rpx;
		margin: 0 auto;
	}
	.lucky_box>text{
		color: #ffffff90;
	}
	.lucky>text{
		margin-top: 4rpx;
	}
	.xingyun{
		color: #ffffff !important;
	}
	.jindu {
		width: 100%;
		position: absolute;
		bottom: 190rpx;
		left: 50%;
		transform: translatex(-50%);
		font-size: 48rpx;
		text-align: center;
		color: #ffffff;
		font-family: 'iconfont2';
		letter-spacing: 8rpx;
	}

	.xuancai {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 750rpx;
		height: 450rpx;
		/* animation: redBall 6s linear infinite; */
	}

	.bg1 {
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 150%;
		height: 596rpx;
		z-index: 2;
	}

	.bg2 {
		position: absolute;
		top: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 580rpx;
		height: 360rpx;
		z-index: 3;
	}

	.car_box_tit {
		position: relative;
		font-size: 26rpx;
		margin-left: 32rpx;
		color: #ffffff;
	}

	.carlogo {
		position: absolute;
		top: 20rpx;
		right: 50rpx;
		width: 60rpx;
		height: 80rpx;

	}

	.car_box_tit_l>image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.car_img {
		width: 576rpx;
		height: 506rpx;
	}

	.car_img>image {
		width: 100%;
		height: 100%;
	}

	.car_number {
		position: relative;
		width: 212rpx;
		margin-top: 24rpx;
	}

	.car_number>text {
		position: absolute;
		top: -24rpx;
		left: 20rpx;
		font-size: 48rpx;
		z-index: 2;
		font-family: 'iconfont2';
	}

	.car_bg2 {
		position: absolute;
		top: 0;
		left: 0;
		max-width: 320rpx;
		height: 48rpx;
		z-index: 1;
	}
	.result{
		width: 690rpx;
		height: 194rpx;
		margin: 30rpx auto;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}
	.result_tit{
		font-family: 'iconfont2';
		font-size: 46rpx;
		margin-top: 20rpx;
		background: linear-gradient(90deg, #26A4F2, #ffffff);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.tips{
		width: 690rpx;
		margin: 30rpx auto;
		color: #ffffff;
	}
	.tips>text:nth-child(2){
		color: #ffffff90;
	}
	.tip_btn{
		width: 690rpx;
		padding: 20rpx 0;
		margin: 30rpx auto;
		color: #ffffff;
		font-size: 36rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	}
	/deep/ .u-navbar__content__right__text {
		color: #ffffff;
	}
</style>